<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-for 数组更新</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <link rel="stylesheet" href="./Css/css-1.css">
</head>

<body>
    <div id='app'>
        <ul>
            <li v-for="book in books">{{book.name}}-{{book.author}} </li>
        </ul>
        <!-- push():添加一个数组元素   app.books.push({name:"《css揭秘》",author:"[希] lex verou"})-->
        <!-- pop():删除数组结尾的元素,无参数  app.books.pop()-->
        <!-- shift():删除数组开头的元素  app.books.shift() -->
        <!-- unshift():在数组的开头添加元素  app.books.unshift({name:"《将进酒》",author:"李白"})-->
        <!-- splice(p1[索引],p2[删除数目],p3[插入元素]):从数组中删除一些元素，插入一些元素;  app.books.splice(1,0,{name:"将进酒",author:"李白"})-->
        <!-- sort():数组排序 -->
        <!-- reverse():数组反转 -->
        <!-- filter():数组过滤  -->
        <!-- !concat():数组的拼接 app.books.concat([{name:"java",author:"xxx"}]) -->
        <!--!slice(p1[开始位置，包含开始位置],p2[结束位置，不包含结束位置]):获取一个子数组  app.books.slice(1,3) -->

        <hr>
        <!-- 过滤与排序 -->
        <ul>
            <!-- 过滤 -->
            <template v-for="book in filterBooks">
                <li>书名:{{book.name}}</li>
                <li>作者:{{book.author}}</li>
            </template>
            <hr>
            <template v-for="book in sortedBooks">
                <li>书名:{{book.name}}</li>
                <li>作者:{{book.author}}</li>
            </template>
        </ul>

    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                books: [{
                    name: '《Vue.js实践》',
                    author: '梁灏'
                }, {
                    name: '《JavaScript语言精粹》',
                    author: "Douglas Crockford"
                }, {
                    name: '《JavaScript高级程序设计》',
                    author: "Nicholas C.Zakas"
                }, ],
            },
            computed: {
                filterBooks: function() {
                    return this.books.filter(function(book) {
                        return book.name.match(/Vue/);
                    });
                },
                sortedBooks: function() {
                    return this.books.sort(function(a, b) {
                        console.log(a);
                        console.log(b);
                        return a.name.length < b.name.length;
                    })
                }
            }
        });

        // filter(([数组元素],[索引],[元素所在的数组])=>{}[函数])
        // app.books = app.books.filter(function(item, index, array) {
        //     // console.log(item);
        //     // console.log(index);
        //     // console.log(array);
        //     // 返回数组里面name有JavaScript的元素
        //     return item.name.match(/JavaScript/);
        // });


        // 给数组添加一个元素
        // app.books.splice(3, 1, {
        //     name: '《CSS揭秘》',
        //     author: "[希] Lea Verou"
        // });

        // 修改数组的长度
        //    app.books.splice(1);
    </script>
</body>

</html>